<template>
	<view class="">
		<!--  -->
		<ben></ben>
		<!--  -->
		<view class="head_back pad20 row">
			<image src="@/static/image/44.png" mode="" style="width: 240rpx;height: 160rpx;margin-left: 20rpx;"></image>
			<view class="minleft30 column font600 colf" style="font-size: 50rpx;">
				{{ userinfo.integral }}
				<view class="mintop40 row align_item_c">
					<image src="@/static/image/55.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
					<view class="minleft10 size28 colf font500">
						我的积分
					</view>
					<view class="background_f minleft40 rad3 font500 size22"
						style="color: #F55726; padding: 4rpx 16rpx;"
						@click="$jump.nav('/mypackage/user/detail_intergral')">
						积分明细
					</view>
				</view>
			</view>
		</view>
		<view class="col3 size30 text_center font600 background_f pad30_tb">
			积分充值
		</view>
		<view class="row flexwrap min30_rl">
			<view class="posrel mintop30 box column" v-for="(item,index) in list" :key="index"
				style="width: 32%;height: 135px;">
				<view class="text_center size22 font500 col0" style="margin-top: 6px;">
					积分
				</view>
				<view class="text_center size36 font500" style="color: #FF5C00;margin-top: 10px;">
					{{ item.integral }}
				</view>
				<view class="minto" style="margin-bottom: 26rpx;" @click="getRecharge(item.id)">
					<view class="text_center size22 font500 col0">
						￥{{ item.price }}
					</view>
					<view class="text_center size26 font500" style="color: #764204;margin-top: 6px;">
						立即充值
					</view>
				</view>
				<image src="@/static/image/5.png" class="posabs zin-1" style="width: 100%;height: 135px;">
				</image>
			</view>
		</view>
		<view class="min30 rad2 pad30" style="background: linear-gradient( 180deg, #FFC690 0%, #FFFFFF 34%);">
			<view class="size30 font600 col0 text_center minbottom20">
				积分使用规则
			</view>
			<view class="">
				<mp-html :content="html" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {},
				user_id: '',
				type: 1,
				list: [],
				html: ''
			}
		},

		onLoad() {

		},
		onShow() {
			//当前页面展示的时候他就执行该生命周期
			const token = uni.getStorageSync('token');
			this.type = uni.getStorageSync('user_type');
			this.user_id = uni.getStorageSync('user_id');
			if (token) {
				//如果存在token
				this.getUserinfo()
				this.getPoints()
				this.getAgreement()
				//按正常逻辑来讲 登录成功 我们是不是需要向服务器获取用户的信息？
				//那么我们一起来获取用户信息
			} else {

				uni.showToast({
					title: '您还未登录，正在前往登录',
					icon: 'none'
				})
				setTimeout(function() {
					uni.navigateTo({
						url: "/mypackage/user/login"
					})
				}, 1000)
			}
		},
		methods: {
			async getAgreement() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("home/agreement")
				if (code == 200) {
					this.html = data.terms_use

				} else {
					console.log(message);
				}
			},
			async getUserinfo() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("member/user_info/" + this.user_id)
				if (code == 200) {
					this.userinfo = data

				} else {
					console.log(message);
				}
			},
			async getPoints() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("member/points")
				if (code == 200) {
					this.list = data
				} else {
					console.log(message);
				}
			},
			async getRecharge(id) {
				let {
					code,
					message,
					data
				} = await this.$com.fetch("member/Points_top_up", {
					user_id: this.user_id,
					is_type: this.type == 3 ? 2 : 1,
					points_id: id
				})
				if (code == 200) {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: function(res) {
							uni.showToast({
								title: message,
								icon: 'success'
							})
							setTimeout(function() {
								uni.switchTab({
									url: '/pages/user/my'
								})
							}, 1000)
						},
						fail: function(err) {
							console.log(321);
							uni.showToast({
								icon: "error",
								title: '您取消了支付'
							})
						}
					});
				} else {
					uni.showToast({
						icon: "error",
						title: message
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.head_back {
		background: linear-gradient(63deg, #FF515E 0%, #FF7F3E 100%), linear-gradient(167deg, #FF6B4A 0%, rgba(255, 123, 77, 0) 100%);

	}

	.box {
		margin-right: 13rpx;

		&:nth-child(3n) {
			margin-right: 0;
		}
	}
</style>